<template>
	<view class="content">
		<u-navbar :fixed="false" :title="moduleName" :autoBack="true" :safeAreaInsetTop="true"
			leftIconColor="#fff"></u-navbar>


		<view class="content_main">
			<uni-forms ref="baseForm" :modelValue="FormData" label-position="left" class="FormDataBox"
				label-width="80px">

				<uni-forms-item name="ProductCode" label="物料编号">
					<uni-easyinput type="text" :disabled="true" v-model="FormData.ProductCode" trim="all"
						:clearable="false" placeholder="自动生成"></uni-easyinput>
				</uni-forms-item>

				<uni-forms-item name="ProductName" required label="物料名称">
					<uni-easyinput type="text" v-model="FormData.ProductName" trim="all" :clearable="true"
						placeholder="请输入物料名称"></uni-easyinput>
				</uni-forms-item>

				<uni-forms-item name="UnitName" required label="库存单位">
					<view @click="openBaseScreen('用量单位','radio')">
						<uni-easyinput type="text" v-model="FormData.UnitName" :readonly="true" :inputBorder="false"
							trim="all" :clearable="false" placeholder="请选择库存单位" suffixIcon="right"></uni-easyinput>
					</view>
				</uni-forms-item>

				<uni-forms-item name="ProductSpec" label="规格">
					<uni-easyinput type="text" v-model="FormData.ProductSpec" trim="all" :clearable="true"
						placeholder="请输入规格"></uni-easyinput>
				</uni-forms-item>

				<uni-forms-item name="Remark" RowCloumn="column" label="备注">
					<view class="" style="padding: 10rpx 20rpx ;width: 100%;">
						<u--textarea v-model="FormData.Remark" placeholder="请输入备注" count maxlength="150"></u--textarea>
					</view>
				</uni-forms-item>


				<view class="x-c" style="margin-top: 10rpx;">
					<button class="SubmitBtn" style="width: 100%;" type="primary" @click="SubmitBtn">
						<text class="Text">提交</text>
					</button>
				</view>
			</uni-forms>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				moduleName: '',
				FormData: {
					ProductCode: '',
					ProductName: '',
					ProductID: '',
					ProductSpec: '',

					ProductTypeID: '',
					ProductTypeName: '',

					UnitID: '',
					UnitName: '',

					Remark: ''
				},
				rules: { // 自定义校验
					ProductName: {
						rules: [{
							required: true,
							errorMessage: ' '
						}]
					},
					UnitName: {
						rules: [{
							required: true,
							errorMessage: ' '
						}]
					},
				}
			};
		},
		onLoad(option) {
			if (option.Type == 'add') {
				this.moduleName = '添加物料';
			} else {
				this.moduleName = '编辑物料';
				console.log(this.$store.state.TicketModule.EditDataInfo)

				this.FormData = Object.assign(this.FormData, this.$store.state.TicketModule.EditDataInfo);
			}
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.baseForm.setRules(this.rules);
		},
		mounted() {
			let that = this;

			uni.$on('Listen_Product', function(ret) {
				if (ret.type == '用量单位') {
					that.FormData = Object.assign(that.FormData, ret.data);

					that.FormData = JSON.parse(JSON.stringify(that.FormData));
				}
			})
		},
		onUnload() { // 监听页面卸载,
			this.$store.commit('TicketModule/ChangeAndSetStateData', {
				Name1: 'EditDataInfo',
				data: {}
			});
		},
		methods: {
			openBaseScreen(str, type) {
				if (type == 'radio') {
					let obj = null;
					let url = '/commonPage/Tool/baseScreen';

					if (str == '用量单位') {
						obj = {
							allowClear: false,
							cmd: 'XGD_Units',
							type: str,
							ListeningName: 'Listen_Product',
							// multiple: false,
							serverSearch: {
								isPaging: true, //是否分页
								searchKey: 'SearchKey', //搜索关键词，应包含在param中
								showText: 'UnitName', //查询结果显示的字段
								pageIndexStr: 'PageIndex', //分页页码字段，应包含在param中
								// subText: [{
								// 	label: '描述',
								// 	labelKey: 'desc'
								// }],
								ChoiceDataKey: 'UnitID',
								ChoiceDataData: this.FormData.UnitID,
							},
							param: {
								SearchKey: '',
								PageIndex: 1,
								PageSize: 30
							}
						}

						this.$store.commit('ChangeAndSetStateData', {
							Name1: 'BaseScreenParm',
							data: obj
						})

						uni.navigateTo({
							url: url
						})
					};

				}
			},
			SubmitBtn() {
				let that = this;
				// 通过ref拿到校验结果
				this.$refs['baseForm'].validate().then(res => {
					that.$utils.showLoading('正在提交...');

					setTimeout(() => {

						that.$utils.hideLoading()
						uni.showToast({
							title: '提交成功！',
							icon: 'success',
							duration: 1500
						});

						uni.$emit('Refresh_Product', 'refresh');

						uni.navigateBack();
					}, 2000)

				}).catch((err) => {
					that.$utils.msg('请完善表单', 1000)
					console.log(err)
				})
			},
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #f5f5f5;

		// 表单内容
		.FormDataBox {
			width: 90%;
			margin: 0 auto;

			.uni-forms-item {
				padding: 10rpx 20rpx;
				background-color: #fff;
				margin-top: 20rpx;

				&:first-child .uni-forms-item__label {
					color: #b5b5b5 !important;
				}
			}

			// 输入框上层类名
			.uni-easyinput__content {
				background-color: transparent !important;
				border: none !important;
				// border-bottom: 1px solid #c6c6c6 !important;
			}

			.uni-easyinput__content-input {
				padding-left: 30rpx !important;
			}
		}

		.SubmitBtn {
			background-color: $main-background-color;
		}

	}
</style>